<template>
	<!-- image+swiper配合实现轮播 -->
	<swiper
			indicator-dots 
			indicator-color='rgba(255, 255, 255, .3)' 
			indicator-active-color='#ffffff' 
			circular 
			autoplay 
			interval='2000' 
			vertical>
		<swiper-item>
			<!-- mode属性:
			aspectFit->保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
			aspectFill->保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 
			widthFix->宽度不变，高度自动变化，保持原图宽高比不变
			heightFix->高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3
			-->
			<image src = "../../static/logo.png"   mode = 'aspectFill' class=""></image>
			</swiper-item>
		<swiper-item>
			<image src = "../../static/pic2.jpeg"  mode = 'aspectFill' class=""></image>
		</swiper-item>
		<swiper-item>
			<image src = "../../static/pic1.webp"  mode = 'aspectFill' class=""></image>
		</swiper-item>
		<swiper-item>
			<image src = "../../static/pic3.jpeg"  mode = 'aspectFill' class=""></image>
		</swiper-item>
		<swiper-item>
			<image src = "../../static/pic4.jpeg"  mode = 'aspectFill' class=""></image>
		</swiper-item>
		<swiper-item>
			<image src='https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png' mode="heightFix"></image>
		</swiper-item>
	</swiper>
<!-- 	<view>
		<image src = "../../static/logo.png"   mode = 'aspectFill' class="pic1"></image>
		<image src = "../../static/pic2.jpeg"  mode = 'aspectFill' class="pic2"></image>
		<image src = "../../static/pic1.webp"  mode = 'heightFix' class="pic3"></image>
		<image src = "../../static/pic3.jpeg"  mode = 'aspectFill' class="pic2"></image>
		<image src = "../../static/pic4.jpeg"  mode = 'aspectFill' class="pic2"></image>
		<image src='https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png' mode="heightFix"></image>
	</view> -->
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.pic1 {
	width: 150px;
	height: 150px;
}
.pic2 {
	width: 200px;
	height: 200px;
}
.pic3 {
	height: 300px;
	
}
swiper {
	width: 100vw;
	height: 200px;
	border: 1px solid #fffff;
	swiper-item {
		width: 100%;
		height: 100%;
		background: pink;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
